<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 下拉菜单需要依赖jquery和bootstrap.bundle.js -->
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>下拉菜单</title>
</head>
<body>
    <div class="container">
        <!-- 基础下拉菜单 -->
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                下拉菜单
            </button>
            <!-- 下拉菜单的选项 -->
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
        <!-- 修改下拉框的方向 -->
        <!-- dropleft：从左边弹出 -->
        <!-- dropright 从右边弹出-->
        <!-- dropup 从上弹出-->
        <hr>
        <div class="dropleft ">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                下拉菜单
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
        <hr>
        <div class="dropright">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                下拉菜单
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
        <hr>
        <div class="dropup">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                下拉菜单
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">连接1</a>
                <a href="#" class="dropdown-item">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
        <hr>
        <!-- 下拉标题和分割线 -->
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                下拉菜单
            </button>
            <!-- 下拉菜单的选项 -->
            <div class="dropdown-menu">
                <!-- .dropdown-header创建下拉框标题 -->
                <h5 class="dropdown-header">北海</h5>
                <a href="#" class="dropdown-item">海城区</a>
                <a href="#" class="dropdown-item">银海区</a>
                <a href="#" class="dropdown-item">铁山港区</a>
                <a href="#" class="dropdown-item">合浦县</a>
                <!-- dropdown-divider创建下拉框分割线 -->
                <div class="dropdown-divider"></div>
                <h5 class="dropdown-header">钦州</h5>
                <a href="#" class="dropdown-item">钦南区</a>
                <a href="#" class="dropdown-item">钦北区</a>
                <a href="#" class="dropdown-item">灵山县</a>
                <a href="#" class="dropdown-item">浦北县</a>
            </div>
        </div>
        <hr>
        <!-- 设置下拉选项的状态 -->
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                下拉菜单
            </button>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item active">连接1</a>
                <a href="#" class="dropdown-item disabled">连接2</a>
                <a href="#" class="dropdown-item">连接3</a>
            </div>
        </div>
    </div>
    
</body>
</html>